<template>
	<view class="content">
		<u-loading-icon text="耐心等一会" textSize="18" :show="status" color="green" mode="semicircle"
			size="36"></u-loading-icon>
		<!-- <u-rate :count="count" v-model="value"></u-rate> -->
		<view class="nav">
			<u-swiper :list="navImgList" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
				bgColor="#ffffff" :indicator="true"></u-swiper>
		</view>
		<!-- 搜索组件 -->
		<u-search placeholder="输入你想搜索的内容" v-model="keyword" bgColor="#fffef9" placeholderColor="#69a794" color="#45b787"
			height="48" borderColor="#20a162" margin="20px 10px 10px 10px" @custom="gotoSearch()"
			@clear="clearKeyWord()" @clickIcon="clearKeyWord()" @change="change"></u-search>
		<view class="list" v-show="scienceList.length!==0">
			<u-list @scrolltolower="scrolltolower()" @scroll="scrollEvent()">
				<u-list-item v-for="(item, index) in scienceList" :key="index">
					<u-cell :title="item.title" @click.native="gotoDetail(item)">
						<u-avatar slot="icon" shape="square" size="35" :src="item.scienceImagesList[0].images"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="nodata" v-if="scienceList.length===0">
			<image class="nodataImg" src="../../static/images/nodata.png" mode="aspectFit"></image>
		</view>
		<!-- 加载更多的显示组件 -->
		<view class="wrap">
			<u-loadmore :status="dataStatus" marginTop="10" :dashed="true" color="#69a794" iconColor="#69a794"
				lineColor="#69a794" line></u-loadmore>
		</view>
		<!-- 消息提示 -->
		<u-notify :show="notifyStatus" ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/tool.js";
	// 导入history.js
	import {
		saveHistroy,
		queryHistory
	} from "@/api/history.js"
	export default {
		data() {
			return {
				title: 'Hello',
				count: 5,
				value: 2,
				navImgList: [],
				//science数据
				scienceList: [],
				//临时science数据数组
				TempScienceList: [],
				// 数据加载flag
				status: true,
				keyword: "",
				// 请求science数据的参数
				pageSize: 10,
				pages: 1,
				type: "原创",
				// 数据加载状态
				dataStatus: "loadmore",
				//消息提示状态
				notifyStatus: true,
				notifyMessage: "数据加载中",
				//TODO 历史记录,只能暂时先通过缓存实现
				historyList: [],
			}
		},
		onLoad() {
			this.getScienceData();
			//获取轮播图
			this.getNavImg()
		},
		onPullDownRefresh() {
			//做数据加载
			this.pages++;
			if (this.dataStatus === "nomore") {
				this.notifyMessage = "数据已加载完毕"
			}
			if (this.dataStatus === "loading" || this.dataStatus == "loadmore") {
				this.getScienceData();
				this.notifyMessage = "数据正在加载中"
			}
			this.$refs.uNotify.show({
				top: 0,
				type: 'error',
				color: '#ffffff',
				bgColor: '#69a794',
				message: this.notifyMessage,
				duration: 1000 * 2,
				fontSize: 16,
				safeAreaInsetTop: false
			})
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			//让pages增加
			this.pages++;
			//再次调用获取science数据
			this.getScienceData();
		},
		methods: {
			//获取背景图
			getNavImg() {
				this.$request("/welcome/query", "GET", {
					type: "风景"
				}).then(res => {
					res.data.data.list.forEach(t => {
						console.log(t.imageUrl);
						this.navImgList.push(t.imageUrl)
					})
					this.navImgList
				}).catch(error => {
					console.log(error);
				})
			},
			//滚动事件
			scrollEvent(scrollTop) {},
			//上拉触底事件
			scrolltolower() {},
			// 发送get请求获取science文章
			getScienceData() {
				this.$request("/science/query", "GET", {
					pageSize: this.pageSize,
					pages: this.pages,
					type: this.type
				}).then(res => {
					if (res.data.data.records.length == 0) {
						this.dataStatus = "nomore";
						return;
					}
					this.scienceList = [...this.scienceList, ...res.data.data.records];
					//将加载状态的flag设置为false
					this.status = false;
					this.dataStatus = "loadmore"
				}).catch(error => {
					console.log(error)
				})
			},
			//前往查看详细信息
			gotoDetail(item) {
				uni.navigateTo({
					url: `/pages/details/details?id=${item.id}`
				});
				//添加历史记录
				this.addHistory(item);
			},
			gotoSearch() {
				// //模糊查询
				// //1.现在已展示出来的列表进行展示
				if (this.TempScienceList.length === 0) {
					this.TempScienceList = this.scienceList;
				} else {
					this.scienceList = this.TempScienceList;
				}
				// //对原数组进行关键词过滤
				this.scienceList = this.scienceList.filter(t => {
					return t.title.includes(this.keyword)
				})

				if (this.scienceList.length === 0) {
					//如果临时数组为空,则查询数据库
					this.$request('/science/search', 'GET', {
						title: this.keyword
					}).then(res => {
						this.scienceList = res.data.data.records;
					})
				}
			},
			//keyword的change事件
			change() {
				//先调用请求ClearKeyWord的事件
				this.clearKeyWord();
				//再调用gotoSearch()
				this.gotoSearch();
			},
			//用户清除keyWord后
			clearKeyWord() {
				//让scienceList获得临时数组里的值
				//要进行非空判断
				if (this.TempScienceList.length !== 0) {
					this.scienceList = this.TempScienceList;
				}
			},
			//点击搜索时,触发的事件回调
			//添加历史记录
			addHistory(item) {
				//从缓存从取historyList
				this.historyList = uni.getStorageSync("scienceHistory") || [];
				//对historyList进行过滤
				if (this.historyList.length != 0) {
					this.historyList = this.historyList.filter(t => {
						return t.id !== item.id
					})
				}
				console.log(this.historyList);
				//存放history
				//设置时间
				item.lookTime = parseTime(Date.now());
				this.historyList.unshift(item);
				//再对原数组进行截取
				this.historyList = this.historyList.slice(0, 20);
				//保存用户历史记录
				saveHistroy(this.historyList).then(res => {
					console.log(res)
				}).catch(res => {
					console.log(res)
				})
				//调用blanceHistroy方法
				this.BlanceHistory()
			},
			// 同步历史记录
			BlanceHistory() {
				const personInfo = uni.getStorageSync("personInfo")
				this.$request(`/history/science/query/${personInfo.id}`, "GET", {}, {
					token: uni.getStorageSync("token"),
					"content-type": "application/json"
				}).then(res => {
					this.historyList = res.data.data;
					//存缓存
					uni.setStorageSync("scienceHistory", this.historyList);
					console.log(this.historyList)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		margin-top: 15rpx;
	}

	.list {
		margin-top: 30rpx;
	}

	.nodata {
		width: 100%;
		height: 40%;

		.nodataImg {
			width: 100%;
		}
	}
</style>